import React from 'react'
import {Button} from 'antd';
import { WeaNewScroll, WeaSearchGroup } from 'ecCom';
import './../../style/searchcondition/SearchCondition';

export default class SearchCondition extends React.Component{
  constructor(props){
    super(props)
    this.state={
      _isshow : this.props.showSearchAd || "none",
      _top : '46px'
    }
  }
  //是否显示高级搜索
  showAdvanced(type) {
    let {_isshow} = this.state;
    if (_isshow == 'none') {
      _isshow = 'block';
    } else {
      _isshow = 'none';
    }
    this.setState({_isshow:_isshow,_top:$(".wea-develop-search-condition-main").outerHeight()});
  }
  componentWillReceiveProps(newProps){
    if(this.props.locationkey!=newProps.locationkey){
      this.setState({_isshow:newProps.showSearchAd});
    }
  }
  //scrollHeight-滚动条高度  searchsAd-高级查询条件列表  buttonsAd-高级查询列表页面按钮 
  //左侧查询条件 leftItems
  render(){
    const {searchsAd,buttonsAd,leftItems,scrollHeight,darkHeight} = this.props;
    const {_isshow,_top} = this.state;
    return(
      <div className="wea-develop-search-condition-main">
        {leftItems && leftItems.length>0 && leftItems.map((element,idx)=>{
           return <div className="item-div-left">
                    {element.title && <span className="item-span-left item-span-left-title">{element.title+":"}</span>}
                    {element.btn && <span className="item-span-left">{element.btn}</span>}
                  </div>
        })}
        {searchsAd && searchsAd.length>0 && <div className="item-span-right"><Button type='ghost' onClick={(e) => this.showAdvanced()}>高级搜索</Button></div>}
        <div className="condition-search-container" style={{ display: _isshow,top:_top }}>
            <WeaNewScroll height={scrollHeight || 300}>
                {
                  searchsAd && searchsAd.length>0 && searchsAd.map((element,idx)=>{
                    return <WeaSearchGroup title={element.title} items={element.item} showGroup={element.showGroup || true} col={element.col || 2} />
                  })
                }
            </WeaNewScroll>
            <div className="condition-search-buttons">
                <div style={{ textAlign: "center" }}>
                    {buttonsAd}
                </div>
            </div>
        </div>
        <div class="condition-search-mask-dark" style={{ display: _isshow,height: (darkHeight || window.innerHeight) + "px",top:_top }} onClick={(e) => this.showAdvanced()}></div>
      </div>
    )
  }
}